<template>
  <div class="detail">
    <detail-nav-bar :titles="['商品','参数','评论','推荐']" class="detail-nav" @tabItemClick="tabItemClick" />
    <scroll class="content" ref="scroll" @scroll="contentScroll" :probe-type="3">
      <detail-swiper :topImages="topImages"/>
      <detail-base-info :goods="goods" />
      <detail-shop-info :shop="shop" />
      <detail-goods-info :detail-info="detailInfo" @imgLoad="imgLoad"/>
      <detail-param-info ref="params" :param-info="paramInfo" />
      <detail-comment-info ref="comment" :comment-info="commentInfo" />
      <goods-list ref="goods" :goods="recommendInfo"/>
    </scroll>
    <detail-bottom-bar @addCart="addToCart"/>
    <back-top @click.native="backClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import { getDetailList, GoodsInfo , Shop, ParamsInfo, getRecommend} from '@/api/modules/detail'

import DetailNavBar from "./childComps/DetailNavBar";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import DetailShopInfo from "./childComps/DetailShopInfo";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
import DetailParamInfo from "./childComps/DetailParamInfo";
import DetailCommentInfo from "./childComps/DetailCommentInfo";
import DetailBottomBar from "./childComps/DetailBottomBar";

import Scroll from "@/components/common/scroll/Scroll";
import GoodsList from "@/components/content/goods/GoodsList";

import { itemListenerMixin, backTopMixin } from "@/mixin/mixin"
import { debounce } from "@/utils/debounce"

export default {
  name: "Detail",
  components: {
    Scroll,
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsList,
    DetailBottomBar
  },
  data() {
    return {
      topImages: [],
      goods: {
        columns: ["","",""],
        services: [],
        name: ""
      },
      shop: {},
      detailInfo: {},
      paramInfo: {}, //参数信息
      commentInfo: [], //评论信息
      recommendInfo: [], //推荐列表
      // isShowBackTop: false,
      detailOffsetTop: [], //详情页中各个组件的位置offsetTop
      getDetailOffsetTop: null,
      currentIndex: 0,
      // itemImgLister: null  用混入
    }
  },
  computed: {

  },
  created() {
    this.getDetailData()
    this.getRecommend()

    this.getDetailOffsetTop = debounce(() => {

      this.detailOffsetTop = []
      this.detailOffsetTop.push(0)
      this.detailOffsetTop.push(this.$refs.params.$el.offsetTop)
      this.detailOffsetTop.push(this.$refs.comment.$el.offsetTop)
      this.detailOffsetTop.push(this.$refs.goods.$el.offsetTop)
      console.log(this.detailOffsetTop)
    },200)

  },
  mounted() {
  },
  mixins: [itemListenerMixin, backTopMixin],
  methods: {
    async getDetailData() {
      const {result: res} = await getDetailList(this.$route.params.iid)

      console.log(res)
      //1.获取顶部banner
      this.topImages = res.itemInfo.topImages
      ////2.获取商品详情
      this.goods = new GoodsInfo(res.itemInfo, res.columns, res.shopInfo.services)
      //3.获取商家详情
      this.shop = new Shop(res.shopInfo)
      //4.获取商家详情图片
      this.detailInfo = res.detailInfo
      //5.获取参数信息
      this.paramInfo = new ParamsInfo(res.itemParams.info, res.itemParams.rule)
      //6.获取评论信息
      if(res.rate.cRate !== 0){
        this.commentInfo = res.rate.list
      }
    },
    async getRecommend() {
      const {data:res} = await getRecommend()
      // console.log(res)
      this.recommendInfo = res.list
    },
    imgLoad() {
      // this.$refs.scroll.refresh()
      this.refresh() //拿到的是混入中的 refresh
      this.getDetailOffsetTop() //等图片加载完后才获取offsetTop，不然不准确
    },
    tabItemClick(index) {
      // console.log(index)
      this.$refs.scroll.scrollTo(0, -this.detailOffsetTop[index], 300)
    },
    contentScroll(position) {
      this.isShowBackTop = -position.y > 1000
    },
    addToCart() {
      // 获取购物车需要展示的信息
      const product = {}
      product.image = this.topImages[0]
      product.title = this.goods.title
      product.desc = this.goods.desc
      product.price = this.goods.realPrice
      product.iid = this.goods.iid

      this.$store.dispatch("addCart", product)
    }
  }
}
</script>

<style scoped>
  .detail {
    height: 100vh;
    position: relative;
    z-index: 20;
    background-color: #fff;
  }
  .detail-nav {
    position: relative;
    z-index: 10;
    background-color: #fff;
  }
  .content {
    height: calc(100% - 44px);
  }
</style>
